<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制台对话框 API 文档</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --text-color: #333;
            --bg-color: #f9f9f9;
            --code-bg: #f0f0f0;
            --border-color: #ddd;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --error-color: #e74c3c;
        }
        
        /* 暗黑模式变量 */
        @media (prefers-color-scheme: dark) {
            :root {
                --primary-color: #5dade2;
                --secondary-color: #3498db;
                --text-color: #ecf0f1;
                --bg-color: #2c3e50;
                --code-bg: #34495e;
                --border-color: #7f8c8d;
                --success-color: #2ecc71;
                --warning-color: #f39c12;
                --error-color: #e74c3c;
            }
            
            .feature-item {
                background-color: #34495e;
            }
            
            .code-header {
                background-color: rgba(0,0,0,0.3);
            }
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            transition: all 0.3s ease;
        }
        
        /* 代码块标题栏 */
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0,0,0,0.1);
            padding: 5px 10px;
            border-radius: 5px 5px 0 0;
            font-size: 0.8em;
            font-family: 'Consolas', 'Courier New', monospace;
        }
        
        .code-language {
            color: var(--text-color);
            font-weight: bold;
            opacity: 0.8;
        }
        
        /* 代码容器 */
        .code-container {
            position: relative;
            margin: 15px 0;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        pre {
            background-color: var(--code-bg);
            padding: 15px;
            border-radius: 0 0 5px 5px;
            overflow-x: auto;
            border-left: 4px solid var(--primary-color);
            margin: 0;
            tab-size: 4;
        }
        
        /* 复制按钮 */
        .copy-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 3px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.7em;
            transition: all 0.3s;
        }
        
        .copy-btn:hover {
            background-color: var(--secondary-color);
        }
        
        /* 返回顶部按钮 */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: var(--primary-color);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 100;
        }
        
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
        
        .back-to-top:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
        }
        
        /* 其他样式保持不变... */
        h1, h2, h3 {
            color: var(--primary-color);
            margin-top: 1.5em;
        }
        
        h1 {
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
        }
        
        code {
            font-family: 'Consolas', 'Courier New', monospace;
            background-color: var(--code-bg);
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        .note {
            background-color: #e7f4ff;
            border-left: 4px solid var(--primary-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }
        
        .warning {
            background-color: #fff8e6;
            border-left: 4px solid var(--warning-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid var(--border-color);
            padding: 10px;
            text-align: left;
        }
        
        th {
            background-color: var(--primary-color);
            color: white;
        }
        
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
        .example {
            background-color: #e8f8f5;
            border-left: 4px solid var(--success-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }
        
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .feature-item {
            background-color: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .feature-list {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <h1>控制台对话框 API 文档</h1>

    <h2>概述</h2>
    <p>本 API 提供在 Windows 控制台应用程序中创建交互式对话框的简单方法，包括消息框、输入对话框和具有各种按钮配置的自定义对话框。</p>

    <h2>初始化</h2>
    <h3><code>init()</code></h3>
    <p>初始化控制台句柄。在使用任何其他函数之前必须调用。</p>
    <div class="code-container">
        <div class="code-header">
            <span class="code-language">C++</span>
            <button class="copy-btn" onclick="copyCode('init-code')">复制</button>
        </div>
        <pre id="init-code">
#include &lt;windows.h&gt;

HANDLE hConsole;
void init() {
    hConsole = GetStdHandle(STD_OUTPUT_HANDLE);
}</pre>
    </div>

    <h2>常量</h2>
    <h3>对话框类型</h3>
    <div class="code-container">
        <div class="code-header">
            <span class="code-language">C++</span>
            <button class="copy-btn" onclick="copyCode('dialogtype-code')">复制</button>
        </div>
        <pre id="dialogtype-code">
enum class DialogType { 
    OK,     // 仅确定按钮
    YESNO,  // 是/否按钮
    SURCAN, // 确定/取消按钮
    INPUT,  // 文本输入框
    CUSTOM  // 自定义按钮
};</pre>
    </div>

    <h3>控制台颜色</h3>
    <div class="code-container">
        <div class="code-header">
            <span class="code-language">C++</span>
            <button class="copy-btn" onclick="copyCode('consolecolor-code')">复制</button>
        </div>
        <pre id="consolecolor-code">
enum ConsoleColor {
    BLACK = 0,       // 黑色
    BLUE = 1,        // 蓝色
    GREEN = 2,       // 绿色
    CYAN = 3,        // 青色
    RED = 4,         // 红色
    MAGENTA = 5,     // 品红
    YELLOW = 6,      // 黄色
    WHITE = 7,       // 白色
    GRAY = 8,        // 灰色
    BRIGHT_BLUE = 9, // 亮蓝色
    BRIGHT_GREEN = 10, // 亮绿色
    BRIGHT_CYAN = 11,  // 亮青色
    BRIGHT_RED = 12,   // 亮红色
    BRIGHT_MAGENTA = 13, // 亮品红
    BRIGHT_YELLOW = 14,  // 亮黄色
    BRIGHT_WHITE = 15  // 亮白色
};</pre>
    </div>

    <h2>核心函数</h2>
    <h3><code>createConsoleInsideWindow()</code></h3>
    <p>在控制台窗口中创建并显示对话框。</p>
    <div class="code-container">
        <div class="code-header">
            <span class="code-language">C++</span>
            <button class="copy-btn" onclick="copyCode('mainfunc-code')">复制</button>
        </div>
        <pre id="mainfunc-code">
int createConsoleInsideWindow(
    const std::string& message,                // 要显示的消息
    DialogType type = DialogType::OK,          // 对话框类型
    std::string* inputResult = nullptr,        // 存储输入文本的指针(用于INPUT类型)
    const std::vector&lt;std::pair&lt;std::string, int&gt;&gt;* customButtons = nullptr  // 自定义按钮(用于CUSTOM类型)
);</pre>
    </div>

    <h4>参数:</h4>
    <ul>
        <li><code>message</code>: 对话框中显示的文本(自动换行)</li>
        <li><code>type</code>: 对话框类型(默认: OK)</li>
        <li><code>inputResult</code>: 存储用户输入的指针(用于输入对话框)</li>
        <li><code>customButtons</code>: 按钮文本/返回值对的向量指针(用于自定义对话框)</li>
    </ul>

    <h4>返回值:</h4>
    <ul>
        <li>对于按钮对话框: 返回所选按钮关联的值</li>
        <li>对于输入对话框: 成功返回0，取消返回-1</li>
        <li>错误时返回-1</li>
    </ul>

    <h2>使用示例</h2>
    <div class="example">
        <h3>简单消息框</h3>
        <div class="code-container">
            <div class="code-header">
                <span class="code-language">C++</span>
                <button class="copy-btn" onclick="copyCode('example1-code')">复制</button>
            </div>
            <pre id="example1-code">
init();
createConsoleInsideWindow("操作成功完成!");</pre>
        </div>
    </div>

    <div class="example">
        <h3>是/否对话框</h3>
        <div class="code-container">
            <div class="code-header">
                <span class="code-language">C++</span>
                <button class="copy-btn" onclick="copyCode('example2-code')">复制</button>
            </div>
            <pre id="example2-code">
int result = createConsoleInsideWindow("您要继续吗?", DialogType::YESNO);
if (result == 1) {
    // 用户选择了"是"
}</pre>
        </div>
    </div>

    <div class="example">
        <h3>输入对话框</h3>
        <div class="code-container">
            <div class="code-header">
                <span class="code-language">C++</span>
                <button class="copy-btn" onclick="copyCode('example3-code')">复制</button>
            </div>
            <pre id="example3-code">
std::string input;
int result = createConsoleInsideWindow("请输入您的姓名:", DialogType::INPUT, &input);
if (result == 0) {
    // 用户输入了内容，存储在input中
}</pre>
        </div>
    </div>

    <div class="example">
        <h3>自定义按钮对话框</h3>
        <div class="code-container">
            <div class="code-header">
                <span class="code-language">C++</span>
                <button class="copy-btn" onclick="copyCode('example4-code')">复制</button>
            </div>
            <pre id="example4-code">
std::vector&lt;std::pair&lt;std::string, int&gt;&gt; buttons = {
    {"保存", 1},
    {"不保存", 2},
    {"取消", 3}
};

int result = createConsoleInsideWindow("文档已修改，是否保存?", DialogType::CUSTOM, nullptr, &buttons);
switch(result) {
    case 1: /* 保存处理 */ break;
    case 2: /* 不保存处理 */ break;
    case 3: /* 取消处理 */ break;
}</pre>
        </div>
    </div>

    <h2>功能特点</h2>
    <div class="feature-list">
        <div class="feature-item">
            <h4>自动调整大小</h4>
            <p>对话框会根据消息内容自动调整宽度和高度</p>
        </div>
        <div class="feature-item">
            <h4>文本自动换行</h4>
            <p>长文本会自动换行以适应对话框</p>
        </div>
        <div class="feature-item">
            <h4>多行输入支持</h4>
            <p>输入对话框支持多行编辑(最终合并为单行)</p>
        </div>
        <div class="feature-item">
            <h4>自定义按钮</h4>
            <p>可以完全自定义按钮文本和返回值</p>
        </div>
        <div class="feature-item">
            <h4>颜色支持</h4>
            <p>提供多种颜色选项，确保良好的可读性</p>
        </div>
        <div class="feature-item">
            <h4>非破坏性显示</h4>
            <p>对话框关闭后会恢复原来的控制台内容</p>
        </div>
    </div>

    <div class="warning">
        <h3>注意事项</h3>
        <ol>
            <li>使用前必须先调用<code>init()</code>函数</li>
            <li>输入对话框的最大输入长度为4行文本</li>
            <li>对话框位置会自动居中显示</li>
            <li>颜色选择应确保足够的对比度以保证可读性</li>
        </ol>
    </div>

    <div class="back-to-top" id="backToTop">↑</div>

    <script>
        // 返回顶部功能
        const backToTopBtn = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopBtn.classList.add('show');
            } else {
                backToTopBtn.classList.remove('show');
            }
        });
        
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 复制功能
        function copyCode(id) {
            const codeElement = document.getElementById(id);
            const range = document.createRange();
            range.selectNode(codeElement);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            
            try {
                const successful = document.execCommand('copy');
                const btn = event.target;
                if(successful) {
                    btn.textContent = '已复制!';
                    setTimeout(() => {
                        btn.textContent = '复制';
                    }, 2000);
                }
            } catch(err) {
                console.error('复制失败:', err);
            }
            
            window.getSelection().removeAllRanges();
        }
    </script>
</body>
</html>